<template>
  <div id="LineChart" class="echarts" style="width: 100%; height: 350px"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
const initChart = (data: any): ECharts => {
  const charEle = document.getElementById("LineChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  const option: EChartsOption = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      show: true,
      top: 8,
      textStyle: {
        //解决图例中图块和文字不对齐
        fontSize: 12,
        height: 8,
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
      },
      data: data.seriesData,
    },
    grid: {
      top: "12%",
      left: "3%",
      right: "3%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.xData,
      axisLabel: {
        interval: 0,
        rotate: 45,
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        // 去掉刻度
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 虚线
          type: "dashed",
        },
      },
      axisLine: {
        // 去掉轴线
        show: false,
      },
    },
    series: [
      {
        name: data.seriesData[0],
        type: "line",
        data: data.stuData,
      },
      {
        name: data.seriesData[1],
        type: "line",
        data: data.teachData,
      },
    ],
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart,
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>
